<template>
  <div class="svgCloudWrapper">
    <svg :width="width" :height="height" @mousemove="listener($event)">
      <text
        :ref="`ref${index}`"
        class="text"
        :key="index"
        v-for="(tag, index) in tags"
        :x="tag.x"
        :y="tag.y"
        :font-size="60 * (600/(600-tag.z))"
        :fill-opacity="((400+tag.z)/600)"
        :fill="colors[index]"
        width="100"
        height="100"
        @click="click(tag, index)"
      >{{tag.text}}</text>
    </svg>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
interface ITags {
  text: string
  x: number
  y: number
  z: number
  href: string
  isChoose: boolean
  color: string
}
const ExtendVue = Vue.extend({
  computed: {
    CX() {
      return this.width / 2
    },
    CY() {
      return this.height / 2
    },
  },
})

@Component({})
export default class SVGCloud extends ExtendVue {
  @Prop({ type: Array, default: () => ({}) })
  labels!: string[]

  width = 907 //svg宽度
  height = 700 //svg高度
  RADIUS = 200 //球的半径
  speedX = Math.PI / 360 //球一帧绕x轴旋转的角度
  speedY = Math.PI / 360 //球-帧绕y轴旋转的角度
  tags: ITags[] = []
  colors: string[] = [] //存储颜色

  listener(event: MouseEvent) {
    //响应鼠标移动
    var x = event.clientX - this.CX
    var y = event.clientY - this.CY
    this.speedX =
      x * 0.0001 > 0
        ? Math.min(this.RADIUS * 0.00002, x * 0.0001)
        : Math.max(-this.RADIUS * 0.00002, x * 0.0001)
    this.speedY =
      y * 0.0001 > 0
        ? Math.min(this.RADIUS * 0.00002, y * 0.0001)
        : Math.max(-this.RADIUS * 0.00002, y * 0.0001)
  }

  rotateY(angleY: number) {
    var cos = Math.cos(angleY)
    var sin = Math.sin(angleY)
    for (let tag of this.tags) {
      var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX
      var z1 = tag.z * cos + (tag.x - this.CX) * sin
      tag.x = x1
      tag.z = z1
    }
  }

  rotateX(angleX: number) {
    var cos = Math.cos(angleX)
    var sin = Math.sin(angleX)
    for (let tag of this.tags) {
      var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY
      var z1 = tag.z * cos + (tag.y - this.CY) * sin
      tag.y = y1
      tag.z = z1
    }
  }

  //滚动词条随机变色
  changeColors() {
    for (var i = 0; i < this.labels.length; i++) {
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      this.colors[i] = 'rgb(' + r + ',' + g + ',' + b + ')'
    }
  }

  // 点击
  click(tag: ITags, index: number) {
    tag.isChoose = !tag.isChoose
    if (!tag.isChoose) {
      ;(this.$refs[`ref${index}`] as any)[0].style.fill = '#03e9f4'
    } else {
      ;(this.$refs[`ref${index}`] as any)[0].style.fill = this.colors[index]
    }

    console.log('dsdsddsd', tag, index)
  }

  created() {
    this.changeColors()

    //初始化标签位置
    let tags: ITags[] = []
    for (let i = 0; i < this.labels.length; i++) {
      let tag = {} as ITags
      let k = -1 + (2 * (i + 1) - 1) / this.labels.length
      let a = Math.acos(k)
      let b = a * Math.sqrt(this.labels.length * Math.PI)
      tag.color = (this.labels[i] as any).color
      tag.isChoose = (this.labels[i] as any).isChoose
      tag.text = (this.labels[i] as any).value
      tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b)
      tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b)
      tag.z = this.RADIUS * Math.cos(a)
      tag.href = ''
      tags.push(tag)
    }
    this.tags = tags
  }

  mounted() {
    //使球开始旋转
    setInterval(() => {
      this.rotateX(this.speedX)
      this.rotateY(this.speedY)
    }, 17)
  }
}
</script>

<style scoped lang="scss">
.text {
  display: inline-block;
  font-size: 16px;
  box-shadow: 0 4px 8px 0 #fefafb;
  transition: all 0.5s;

  cursor: pointer;

  &.active {
    background-color: #5a6579;
    border: 1px solid #5a6579;
    color: #fff !important;
  }
}
</style>
